<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音提醒</title>
    <link rel="shortcut icon" href="/static/imag/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/body.css">
    <style>
        .device-list {
            margin-bottom: 20px;
        }

        .device-list label {
            display: block;
            margin: 10px 0;
            padding: 10px;
            background-color: #383e4b;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .device-list label:hover {
            background-color: #ffbe76;
            color: #333;
        }

        .device-list input[type="radio"] {
            margin-right: 10px;
        }

        .action-buttons {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

        .action-buttons button {
            padding: 10px 20px;
            background-color: #ffbe76;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .action-buttons button:hover {
            background-color: #ff9a5a;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <h2>导航栏</h2>
            <a href="#" onclick="go_back()">返回首页</a>
            <a href="#" onclick="open_win()">窗户状态</a>
            <a href="#" onclick="open_msg()">通知中心</a>
            <a href="#" onclick="open_ai_chat()">ai聊天</a>
            <a href="#" onclick="open_audio()">语音提醒</a>
            <a href="#" onclick="open_lost_and_found()">失物招领中心</a>
            <a href="#" onclick="open_car_video()">小车视频</a>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <img src="./static/imag/logo.png" alt="Logo" class="logo" title="点击切换主题" id="logo_switchTheme">
                <h1>语音提醒</h1>
                <div class="user-info">
                    <img src="./static/imag/adm.jpg" alt="User Avatar">
                    <div class="invite-code-popup">
                        用户: {{.username}}<br>邀请码: {{.invitecode}}(禁止外传)
                    </div>
                    <div class="username">用户: {{.username}}</div>
                    <button class="logout-button" onclick="logout()">退出登录</button>
                </div>
            </div>

            <div class="notification-center">
                <h2>设备选择与语音对讲</h2>
                <div class="device-list">
                    <label>
                        <input type="radio" name="device" value="device1"> 设备 1
                    </label>
                    <label>
                        <input type="radio" name="device" value="device2"> 设备 2
                    </label>
                    <label>
                        <input type="radio" name="device" value="device3"> 设备 3
                    </label>
                    <label>
                        <input type="radio" name="device" value="device4"> 设备 4
                    </label>
                    <label>
                        <input type="radio" name="device" value="device5"> 设备 5
                    </label>
                    <label>
                        <input type="radio" name="device" value="device6"> 设备 6
                    </label>
                </div>
                <div class="action-buttons">
                    <button id="playButton">开始播放</button>
                    <button id="listenBtn">开始录音</button>
                    <button id="stop_listen_Button">停止录音</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="footer">
        多模态智能校园管理平台
    </div>
    <script src="/static/js/route.js"></script>
    <script src="/static/js/audio.js"></script>
</body>

</html>